<template>
	<view class="empty-state">
		<view class="empty-icon">
			{{ getEmptyIcon() }}
		</view>
		<view class="empty-title">
			{{ getEmptyTitle() }}
		</view>
		<view class="empty-description">
			{{ getEmptyDescription() }}
		</view>
		<view class="empty-actions" v-if="showActions()">
			<button class="action-button primary" @click="handlePrimaryAction" v-if="showPrimaryAction()">
				{{ getPrimaryActionText() }}
			</button>
			<button class="action-button secondary" @click="handleSecondaryAction" v-if="showSecondaryAction()">
				{{ getSecondaryActionText() }}
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits
	} from 'vue'

	const props = defineProps({
		type: {
			type: String,
			required: true,
			validator: (value) => ['joined', 'created', 'approval'].includes(value)
		}
	})

	const emit = defineEmits(['create-circle', 'explore-circles'])

	const getEmptyIcon = () => {
		switch (props.type) {
			case 'joined':
				return '🌟'
			case 'created':
				return '🎯'
			case 'approval':
				return '⏳'
			default:
				return '📭'
		}
	}

	const getEmptyTitle = () => {
		switch (props.type) {
			case 'joined':
				return '还没有加入任何圈子'
			case 'created':
				return '还没有创建任何圈子'
			case 'approval':
				return '没有待审核的圈子'
			default:
				return '暂无数据'
		}
	}

	const getEmptyDescription = () => {
		switch (props.type) {
			case 'joined':
				return '快去发现有趣的圈子，和志同道合的朋友一起交流吧！'
			case 'created':
				return '创建属于你的圈子，聚集更多志同道合的朋友！'
			case 'approval':
				return '你创建的所有圈子都已通过审核'
			default:
				return ''
		}
	}

	const showActions = () => {
		return props.type === 'joined' || props.type === 'created'
	}

	const showPrimaryAction = () => {
		return props.type === 'created'
	}

	const showSecondaryAction = () => {
		return props.type === 'joined'
	}

	const getPrimaryActionText = () => {
		switch (props.type) {
			case 'created':
				return '创建圈子'
			default:
				return ''
		}
	}

	const getSecondaryActionText = () => {
		switch (props.type) {
			case 'joined':
				return '发现圈子'
			default:
				return ''
		}
	}

	const handlePrimaryAction = () => {
		if (props.type === 'created') {
			emit('create-circle')
		}
	}

	const handleSecondaryAction = () => {
		if (props.type === 'joined') {
			emit('explore-circles')
		}
	}
</script>

<style lang="scss" scoped>
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 60rpx;
		text-align: center;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 40rpx;
		opacity: 0.8;
		animation: float 3s ease-in-out infinite;
	}

	.empty-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.empty-description {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 60rpx;
		max-width: 500rpx;
	}

	.empty-actions {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		width: 100%;
		max-width: 400rpx;
	}

	.action-button {
		padding: 24rpx 48rpx;
		font-size: 32rpx;
		border-radius: 48rpx;
		border: none;
		transition: all 0.3s ease;

		&.primary {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;

			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);
			}
		}

		&.secondary {
			background: white;
			color: #667eea;
			border: 2rpx solid #667eea;

			&:active {
				background: #f8f9ff;
				transform: translateY(2rpx);
			}
		}
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-20rpx);
		}
	}
</style>